import { defineComponent, ref, watch, watchEffect } from "vue";
import "./main.scss";
import { useRandomLinearBackgroundStyle } from "@/libs/useRandomLinearBackgroundStyle";
import { ElEmpty, ElScrollbar } from "element-plus";
import SelectGame from "@cs/Select-Game/Select-Game";
import { fetchTopicList, fetchTopicTypeList } from "@/http/topic";
import { useHeaderInputStore } from "@/stores/headerInput";
import { useUserInfoStore } from "@/stores/user";
import type { Http } from "@/interface/Http";
import type { TopicOverview, TopicType } from "@/interface/TopicOverview";
import LoadingComponent from "@cs/Loading/Loading-Component.vue";

export default defineComponent({
  name: "Home-Game",
  setup(props) {
    const randomBackground = useRandomLinearBackgroundStyle();
    const useGrade = useHeaderInputStore();
    const userInfoStore = useUserInfoStore();

    const dataSource = ref<TopicOverview[]>([]);
    const activeTopic = ref<number>(0);
    const selectGameVisible = ref(false);
    const topicTypeList = ref<TopicType[]>([]);
    const loading = ref(false);
    const randomColors = ref<Pick<CSSStyleDeclaration, "background" | "boxShadow">[]>([]);
    const topicLoading = ref(false);

    const onMouseEnter = (event: MouseEvent) => {
      (event.target as HTMLElement).style.boxShadow = (event.target as HTMLElement).style.boxShadow.replace("0.5", "0.8");
    };
    const getSubjectList = () => {
      topicLoading.value = true;
      fetchTopicList({
        gradeId: useGrade.gamePageGrade,
        userId: userInfoStore?.userInfo?.user?.id
      }).then((res: Http.Response<TopicOverview[]>) => {
        if (res.code === 200) {
          dataSource.value = res.data;
          activeTopic.value = dataSource.value[0]?.id || 0;
        }
      }).finally(() => topicLoading.value = false);
    };
    const getSubjectTypeList = () => {
      loading.value = true;
      fetchTopicTypeList({
        subjectId: activeTopic.value,
        userId: userInfoStore?.userInfo?.user?.id
      }).then((res: Http.Response<TopicType[]>) => {
        if (res.code === 200) {
          topicTypeList.value = res.data;
          randomColors.value = Array(res.data.length).fill(1).map(() => randomBackground());
        }
      }).finally(() => loading.value = false);
    };
    const onMouseLeave = (event: MouseEvent) => {
      (event.target as HTMLElement).style.boxShadow = (event.target as HTMLElement).style.boxShadow.replace("0.8", "0.5");
    };
    const onShowGameSelect = () => {
      selectGameVisible.value = true;
    };
    watch(useGrade, (cb) => {
      if (cb) {
        getSubjectList();
      }
    }, {
      deep: true,
      immediate: true
    });
    watchEffect(() => {
      if (activeTopic.value) {
        getSubjectTypeList();
      }
    });
    return () => (
      <>
        <div class={"home-game-container"}>
          <ElScrollbar style={{ height: "auto" }}>
            <div class={"home-game-tags"}>
              {
                topicLoading.value ? Array.from(Array(6).keys()).map((i) => {
                    return (<div class={{ "home-game-tag": true, "skeleton-item": true }} key={i}></div>);
                  }) :
                  dataSource.value.map(it => {
                    return <div class={{ "home-game-tag": true, "home-game-tag-active": activeTopic.value === it.id }}
                                key={it.id} onClick={() => activeTopic.value = it.id}>{it.subjectName}</div>;
                  })
              }
            </div>
          </ElScrollbar>
          <div class={"home-game-item-wrapper"}>
            <LoadingComponent show={loading.value} />
            {!loading.value && topicTypeList.value.length < 1 && !topicLoading.value && <ElEmpty description="没有数据" imageSize={100} class={"empty"} />}
            {
              topicTypeList.value.map((item, i) => {
                return <div class={"home-game-item"}
                            onClick={onShowGameSelect}
                            key={i}
                            style={randomColors.value[i]}
                            onMouseenter={onMouseEnter}
                            onMouseleave={onMouseLeave}>
                  <el-image src={item.typeImg}
                            fit="contain"
                            class={"img"} crossOrigin={"anonymous"} />
                  <div class={"title"}>{item.typeName}</div>
                  <div class={"num"}>共10题</div>

                </div>;
              })
            }
          </div>
        </div>
        <SelectGame v-model:visible={selectGameVisible.value} />

      </>
    );
  }
});
